<template>
  <div class="registerGoods-container app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.pre_db_spec_seller_id" placeholder="所在仓库" clearable class="filter-item select-item"
        @clear="handleFilter">
        <el-option v-for="item in warehouseData" :key="item.id_public_agent_info" :label="item.agent_name"
          :value="item.id_public_agent_info" />
      </el-select>
      <el-select v-model="listQuery.id_public_goods_type" placeholder="一级分类" clearable class="filter-item select-item"
        @change="selectTypeFather" @clear="clearTypeFather">
        <el-option v-for="item in typeFather" :key="item.id_public_goods_type" :label="item.type_name"
          :value="item.id_public_goods_type" />
      </el-select>
      <el-select v-model="listQuery.type_child" :disabled="childDisable" placeholder="二级分类" clearable
        class="filter-item select-item" @clear="handleFilter">
        <el-option v-for="item in typeChild" :key="item.id_public_goods_type" :label="item.type_name"
          :value="item.id_public_goods_type" />
      </el-select>
      <el-select v-model="listQuery.is_online" placeholder="绑定状态" clearable class="filter-item select-item"
        @clear="handleFilter">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.name" :value="item.key" />
      </el-select>
      <el-input v-model="listQuery.goods_name" placeholder="商品名称" clearable class="filter-item input-item"
        style="width: 200px;" @clear="handleFilter" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <div class="page-content">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品ID/商品名称" align="center">
          <template slot-scope="{row}">
            <span>{{ row.id_public_goods_info }} / {{ row.goods_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="一级/二级类" align="center">
          <template slot-scope="{row}">
            <span>{{ row.type_name }} / {{ row.child_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所在仓库" align="center">
          <template slot-scope="{row}">
            <span>{{ row.agent_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="零售规格" align="center">
          <template slot-scope="{row}">
            <span>{{ row.sales_describe }}</span>
          </template>
        </el-table-column>
        <el-table-column label="源价/供价/零售" align="center">
          <template slot-scope="{row}">
            <span>{{ row.publicGoodsSupply4Agent.price_4_supply_buy }}/{{ row.publicGoodsSupply4Agent.price_4_shop_buy
              }}/{{ row.publicGoodsSupply4Agent.price_4_shop_retail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存(供/店)" align="center">
          <template slot-scope="{row}">
            <span>{{ row.publicGoodsSupply4Agent.supply_left_count }}/{{ row.publicGoodsSupply4Shop.shop_left_count
              }}</span>
          </template>
        </el-table-column>
        <el-table-column label="注册状态" align="center" width="100" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-switch v-model="row.publicGoodsSupply4Shop.is_online" inactive-color="#ff4949" :active-value="0"
              :inactive-value="1" @change="handleBind(row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button @click="handleBind(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="currentPage" :limit.sync="listQuery.limit"
      @pagination="getPageList" />

    <el-dialog title="商品注册" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="45%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="商品名称">
              <el-input v-model="temp.goods_name" readonly placeholder="请输入门店名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="门店库存" prop="shop_left_count">
              <el-input v-model="temp.publicGoodsSupply4Shop.shop_left_count" placeholder="请输入门店库存" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="警戒库存">
              <el-input v-model="temp.publicGoodsSupply4Shop.shop_alert_stock_num" placeholder="请输入警戒库存" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">
          取消
        </el-button>
        <el-button type="primary" @click="handleSure">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { warehouseList } from '@/api/warehouse'
import { goodsList } from '@/api/goods'

export default {
  name: 'RegisterGoods',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请正确的库存数据'))
      } else if (!(/^(0|[1-9][0-9]*)$/.test(value))) {
        this.temp.shop_left_count = ''
        callback(new Error('库存数据不正确, 仅限数字'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      currentPage: 0,
      listQuery: {
        invoke_method: 'public_page_4m_shop_goods_list_2_reg',
        filter_type: 1,
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        goods_name: null,
        id_public_goods_type: null,
        type_child: null,
        is_online: null,
        pre_db_spec_buyer_id: null,
        pre_db_spec_seller_id: null
      },
      childDisable: true,
      typeFather: [],
      typeChild: [],
      warehouseData: [],
      bindQuery: {
        invoke_method: 'public_insert_or_update_goods_4_shop',
        pre_db_spec_buyer_and_seller: null,
        shop_left_count: null,
        is_online: null,
        is_agent_sale: null,
        shop_alert_stock_num: null,
        type_4_store: null,
        id_public_goods_info: null
      },
      warehouseQuery: {
        agent_type_4_use: 10,
        pre_db_spec_buyer_id: null,
        invoke_method: 'public_page_4m_supply_list_2_reg',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        pre_db_para_is_online: 0
      },
      statusOptions: [
        { key: 0, name: '已绑定' },
        { key: 1, name: '未绑定' }
      ],
      /* 弹窗数据 */
      temp: {
        publicGoodsInfo: {},
        publicGoodsSupply4Shop: {
          shop_left_count: null,
          shop_alert_stock_num: null
        }

      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        shop_left_count: [
          { required: true, message: '请输入门店库存', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
  },
  mounted() {
    this.getList()
    this.getTypeFather()
    this.getBindWareHouse()
  },
  methods: {
    /*
    * 获取页面数据
    * */
    getList() {
      this.listLoading = true
      this.listQuery.pre_db_spec_buyer_id = this.$route.params.id
      goodsList(this.Qs.stringify({
        invoke_method: 'public_page_4m_shop_goods_list_2_reg',
        filter_type: this.listQuery.filter_type,
        pre_db_para_begin_idx: this.listQuery.pre_db_para_begin_idx,
        pre_db_para_length_4_list: this.listQuery.pre_db_para_length_4_list,
        'public_goods_info.goods_name': this.listQuery.goods_name,
        'public_goods_info.id_public_goods_type': this.listQuery.id_public_goods_type,
        'public_goods_info.type_child': this.listQuery.type_child,
        'public_goods_supply_4_shop.is_online': this.listQuery.is_online,
        pre_db_spec_buyer_id: this.listQuery.pre_db_spec_buyer_id,
        pre_db_spec_seller_id: this.listQuery.pre_db_spec_seller_id,
        'public_goods_supply_4_agent.id_public_goods_supply_4_agent_is_not_null': true
        // 'public_goods_supply_4_agent.is_online': 0
      })).then(response => {
        this.list = response.page_content
        this.total = response.result_num

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
    },

    /*
    * 获取一级分类数据
    * */
    getTypeFather() {
      goodsList(this.Qs.stringify({
        invoke_method: 'public_page_4m_load_main_cls',
        is_online: 0,
        filter_type: 1,
        pre_cmd_para_show_admin_type: 'super_and_login',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10
      })).then(response => {
        this.typeFather = response.page_content
      })
    },
    selectTypeFather(val) {
      console.log(val)
      this.getTypeChild(val)
      this.childDisable = false
    },
    clearTypeFather() {
      this.childDisable = true
      this.listQuery.id_public_goods_type = null
      this.listQuery.type_child = null
      this.getList()
    },
    /*
    * 获取二级分类数据
    * */
    getTypeChild(id) {
      goodsList(this.Qs.stringify({
        invoke_method: 'public_page_4m_load_child_cls',
        filter_type: 1,
        pre_db_para_open_time_require_select: 0,
        pre_cmd_para_show_admin_type: 'super_and_login',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 100,
        type_father: id,
        pre_db_para_order_by_para: ' data_weight desc '
      })).then(response => {
        this.typeChild = response.page_content
      })
    },

    /*
    * 点击分页进行查询
    * */
    getPageList(val) {
      this.listQuery.pre_db_para_begin_idx = (val.page - 1) * this.listQuery.pre_db_para_length_4_list
      this.getList()
    },
    /*
    * 查询数据
    * */
    handleFilter() {
      this.listQuery.pre_db_para_begin_idx = 0
      this.getList()
    },

    /*
    * 获取绑定供应商数据
    * */
    getBindWareHouse() {
      this.warehouseQuery.pre_db_spec_buyer_id = this.$route.params.id
      warehouseList(this.Qs.stringify(this.warehouseQuery)).then(response => {
        this.warehouseData = response.page_content
      })
    },

    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },

    /*
    * 选择数据
    * */
    handleSelectionChange(val) {
      console.log(val)
    },

    /*
    * 绑定操作
    * */
    handleCancel() {
      this.getList()
      this.dialogFormVisible = false
    },
    handleBind(item) {
      console.log(item)
      console.log(item.publicGoodsSupply4Shop.is_online)
      this.temp = Object.assign({}, item) // copy obj
      if (item.publicGoodsSupply4Shop.is_online === 0) {
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else {
        this.handleSure()
      }


    },
    handleSure() {
      console.log(this.temp)
      this.bindQuery.pre_db_spec_buyer_and_seller = this.$route.query.agent_id + '-_-' + this.temp.publicGoodsSupply4Agent.seller_id
      this.bindQuery.is_online = this.temp.publicGoodsSupply4Shop.is_online
      this.bindQuery.shop_left_count = this.temp.publicGoodsSupply4Shop.shop_left_count
      this.bindQuery.shop_alert_stock_num = this.temp.publicGoodsSupply4Shop.shop_alert_stock_num
      this.bindQuery.id_public_goods_info = this.temp.id_public_goods_info

      console.log(this.bindQuery)

      goodsList(this.Qs.stringify(this.bindQuery)).then(response => {
        this.dialogFormVisible = false
        this.$notify({
          title: 'Success',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
    }
  }
}
</script>

<style scoped>

</style>
